<template>
  <div style="height:100%;">
    <el-container style="height:100%;">
      <el-header>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="昵称">
            <el-input v-model="searchForm.name" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="登录账号">
            <el-input v-model="searchForm.account" placeholder="请输入登录账号"></el-input>
          </el-form-item>
          <el-form-item>
            <niupi-btn type="search" @click="getTableData">查询</niupi-btn>
            <niupi-btn type="reset" @click="resetForm">重置</niupi-btn>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-row id="functionBtnRow">
          <niupi-btn type="add" @click="toAdd">添加</niupi-btn>
          <niupi-btn type="update" @click="toUpdate()" :disabled="func.isDisabledForUpdateBtn">修改</niupi-btn>
          <niupi-btn type="delete" @click="remove()" :disabled="func.isDisabledForDelBtn">删除</niupi-btn>
        </el-row>
        <!-- table -->
        <div style="height: calc(100% - 61px - 43px);">
          <el-table ref="table" :data="tableData" @selection-change="tableSelectionChange" @row-click="tableRowClick" border max-height="100%" height="100%">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="name" label="昵称" min-width="10%">
              <template slot-scope="scope">
                <span class="link" @click="toView(scope.row.id)">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="account" label="登陆账号" min-width="10%"></el-table-column>
            <el-table-column prop="createName" label="创建人" min-width="10%"></el-table-column>
            <el-table-column prop="createDatetime" label="创建时间" min-width="10%"></el-table-column>
            <el-table-column prop="updateName" label="最近修改人" min-width="10%"></el-table-column>
            <el-table-column prop="updateDatetime" label="最近修改时间" min-width="10%"></el-table-column>
            <el-table-column prop="isDisabled" label="账号是否被禁用" min-width="10%">
              <template slot-scope="scope">
                {{scope.row.isDisabled == 0 ? '正常' : '禁用'}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <niupi-btn type="update" size="mini" @click.stop="toUpdate(scope.row.id)" />
                <niupi-btn type="delete" size="mini" @click.stop="remove(scope.row.id)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <niupiPagination @refreshTable="getTableData" :total="tableData.length" :pageSize="15" ref="niupiPagination"></niupiPagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import niupiPagination from '@curd/Pagination'
import frameworkUtil from '@/framework/js/frameworkUtil.js'

export default {
  name: 'sysUser',
  components: { niupiPagination },
  mounted () {
    this.getTableData();
  },
  data () {
    return {
      // 表单
      searchForm: {
        name: '',
        account: ''
      },
      // 功能按钮
      func: {
        isDisabledForUpdateBtn: true,
        isDisabledForDelBtn: true
      },
      tableData: []
    }
  },
  methods: {
    // 获取table数据
    getTableData () {
      const loading = frameworkUtil.elementUI.loading(this, '.el-table');
      this.$http.get('http://rap2.taobao.org:38080/app/mock/257330/user/list', {
        params: {
          page: this.$refs.niupiPagination.currentPage,
          rows: this.$refs.niupiPagination.currentPageSize,
          user: this.searchForm.name,
          region: this.searchForm.account
        }
      }).then(response => {
        this.tableData = response.data.data;
        // TODO: 添加延时，避免界面一闪而过
        setTimeout(() => {
          loading.close();
        }, 200)
      });
    },
    tableSelectionChange (selection) {
      this.func.isDisabledForUpdateBtn = selection.length !== 1;
      this.func.isDisabledForDelBtn = !(selection.length >= 1);
    },
    tableRowClick (row, column, event) {
      this.$refs.table.toggleRowSelection(row)
    },
    toAdd () {
      this.$layer.iframe({
        content: {
          content: require('./page/add.vue').default, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {} // props
        },
        area: ['60%', '60%'],
        maxmin: true, // 开启最大化最小化
        title: '添加用户',
        cancel: () => { // 关闭事件
        }
      });
    },
    toUpdate (id) {
      if (id !== undefined) {
        // 空实现
      } else if (this.$refs.table.selection.length === 1) {
        id = this.$refs.table.selection[0].id
      } else {
        return this.$layer.msg('请选择要修改的数据');
      }
      this.$layer.iframe({
        content: {
          content: require('./page/update.vue').default, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { _id: id } // props
        },
        area: ['60%', '60%'],
        maxmin: true, // 开启最大化最小化
        title: '修改用户',
        cancel: () => { // 关闭事件
        }
      });
    },
    toView (id) {
      this.$layer.iframe({
        content: {
          content: require('./page/view.vue').default, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { _id: id } // props
        },
        area: ['60%', '60%'],
        maxmin: true, // 开启最大化最小化
        title: '查看用户',
        cancel: () => { // 关闭事件
        }
      });
    },
    remove (id) {
      let confirmTip = '';
      if (id) {
        confirmTip = '确定删除该记录吗？';
      } else if (this.$refs.table.selection.length > 0) {
        confirmTip = `确定删除选中的${this.$refs.table.selection.length}条记录吗？`;
        id = this.$refs.table.selection.map(item => item.id).join(',');
      } else {
        return this.$layer.msg('请选择要删除的数据')
      }
      this.$layer.confirm(confirmTip, {
        btn: ['确定', '取消']
      }, (layerid) => {
        this.$http.post('http://rap2.taobao.org:38080/app/mock/257330/user/delete', { id: id }).then((res) => {
          if (res.data.code === 200) {
            this.$layer.msg('操作成功!');
            this.getTableData();
          } else {
            this.$layer.msg(res.data.msg);
          }
        });
        this.$layer.close(layerid);
      }, (layerid) => {
        this.$layer.close(layerid);
      })
    },
    // 重置
    resetForm () {
      if (this.$refs.niupiPagination) {
        this.$refs.niupiPagination.currentPage = 1;
      }
      frameworkUtil.JSON.clearValue(this.searchForm);
      this.getTableData();
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
.el-header {
  padding: 10px 0 0 20px;
}
.el-main {
  #functionBtnRow {
    padding: 10px 0 10px 10px;
    border: {
      top: 1px solid #ebeef5;
      right: 1px solid #ebeef5;
      left: 1px solid #ebeef5;
    }
  }

  .el-table {
    .link {
      color: #409eff;
      text-decoration: underline;
      cursor: pointer;
    }
    .el-table__body-wrapper {
      height: 100% !important;
    }
  }

  .el-pagination {
    padding: 7px 0;
    border: {
      left: 1px solid #ebeef5;
      right: 1px solid #ebeef5;
      bottom: 1px solid #ebeef5;
    }
  }
}
</style>
